<template>
  <div class="container">
    <div class="title">
      <el-button class="item" type="primary" @click="showAddDialog">添加用户</el-button>
      <el-input class="item" v-model="searchText" placeholder="输入关键字搜索用户" style="width: 200px;margin-left: 15px;"></el-input>

      <!-- <router-link :to="{ name: 'UserDetails', params: { id: 123 }}">Go to User Details</router-link> -->

    </div>
    <el-table :data="filteredUsers" style="width: 100%" border>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="邮箱" prop="email"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="国家" prop="country"></el-table-column>
      <el-table-column label="职业" prop="occupation"></el-table-column>
      <el-table-column label="兴趣爱好" prop="interests"></el-table-column>
      <el-table-column label="操作" width="249">
        <template #default="{ row }">
          <el-button type="primary" plain @click="editUser(row)">编辑</el-button>
          <el-button type="primary" plain @click="deleteUser(row)">删除</el-button>
          <el-button type="primary" plain @click="lookUser(row.id)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="添加用户" :before-close="handleClose">
      <el-form :model="newUser" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="newUser.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newUser.email"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="newUser.age"></el-input>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="newUser.country"></el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="newUser.occupation"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="newUser.interests"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addUser">
            添加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="editDialogVisible" title="编辑用户" :before-close="handleClose">
      <el-form :model="editedUser" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="editedUser.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editedUser.email"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editedUser.age"></el-input>
        </el-form-item>
        <el-form-item label="国家">
          <el-input v-model="editedUser.country"></el-input>
        </el-form-item>
        <el-form-item label="职业">
          <el-input v-model="editedUser.occupation"></el-input>
        </el-form-item>
        <el-form-item label="兴趣爱好">
          <el-input v-model="editedUser.interests"></el-input>
        </el-form-item>
      </el-form>
      <!-- 插槽用v-solt或者#xxxx -->
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEditedUser">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
  <script setup>
import { ref, computed } from 'vue';
import router from '@/router'

// 用户数据
const userData = ref([
  { id: 1, name: 'Alice', email: 'alice@example.com', age: 25, country: '1', occupation: 'Engineer', interests: 'Reading' },
  { id: 2, name: 'Bob', email: 'bob@example.com', age: 30, country: '1', occupation: 'Teacher', interests: 'Hiking' },
  { id: 3, name: 'Charlie', email: 'charlie@example.com', age: 28, country: '1', occupation: 'Designer', interests: 'Painting' }
]);

// 新用户模板
const newUser = ref({
  id: null,
  name: '',
  email: '',
  age: null,
  country: '',
  occupation: '',
  interests: ''
});

// 编辑用户的数据
const editedUser = ref({});

// 对话框显示控制
const dialogVisible = ref(false);
const editDialogVisible = ref(false);

// 搜索文本
const searchText = ref('');

// 计算属性，用于根据搜索文本过滤用户
const filteredUsers = computed(() => {
  if (!searchText.value) {
    return userData.value;
  }
  return userData.value.filter(user => Object.values(user).some(val => val.toString().toLowerCase().includes(searchText.value.toLowerCase())));
});

// 显示添加用户对话框
const showAddDialog = () => {
  newUser.value = { id: null, name: '', email: '', age: null, country: '', occupation: '', interests: '' }; // 重置newUser对象
  dialogVisible.value = true;
};

// 添加用户
const addUser = () => {
  const newId = userData.value.length ? Math.max(...userData.value.map(user => user.id)) + 1 : 1; // 生成新ID
  newUser.value.id = newId;
  userData.value.push({ ...newUser.value });
  dialogVisible.value = false;
};

// 显示编辑用户对话框
const editUser = (user) => {
  editedUser.value = { ...user };
  editDialogVisible.value = true;
};

// 保存编辑后的用户
const saveEditedUser = () => {
  const index = userData.value.findIndex(user => user.id === editedUser.value.id);
  if (index !== -1) {
    userData.value[index] = { ...editedUser.value };
  }
  editDialogVisible.value = false;
};

// 删除用户
const deleteUser = (user) => {
  const index = userData.value.findIndex(u => u.id === user.id);
  if (index !== -1) {
    userData.value.splice(index, 1);
  }
};




// 对话框关闭前的处理函数
const handleClose = (done) => {
  // 这里可以添加关闭前的确认逻辑
  done();
};

// 查看用户
const lookUser = (id) => {
  // console.log(id);
  router.push({ name: 'user', params: { id: Number(id) } });
}

  </script>
  
  <style scoped lang="scss">
.dialog-footer {
  text-align: right;
  margin-top: 10px;
}

.container {
  width: 100%;
  height: 100%;
  padding: 0 10px;

  .title {
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
  